<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RRrich</title>
    <link rel="stylesheet" href="style.css">
    
    <!-- style标签可以放到代码的任意位置中 -->
    <!-- 内部样式 -->
    <!-- <style>
        /* {}里边的CSS属性，可以写一个或者多个，每个属性都是一个键值对，使用：分割
            键值对之间使用 ; 分割，每个键值对可以独占一行，也可以不独占 */
        p {
            color: green;
            font-size: 30px;
        }
    </style> -->
</head>
<body>
    <!-- 内联样式 -->
    <!-- <p style="color: red; font-size: 40px;">   
        这是一个段落
    </p> -->
    <!--  -->
    <!-- <style>
        /* 1 标签选择器 ：在 { 前边写标签名字，意味着会选中当前页面中所有的指定的标签 */
        p {
            color: yellow;
            font-size: 30px;
        }
    </style> -->
    
    <!-- <p>
        这是一个段落
    </p>

    <p>
        这是另一个段落
    </p> -->

    <style>
        /* 此处定义了一个 CSS类，名字叫做 one，CSS类名定义的时候需要使用 . 开头 */
        /* 类选择器：可以被多个元素引用 */
        /* .one {
            color: red;
        }
        .two {
            color: green;
        }
        .three {
            color: blue;
        }
        .four {
            font-size: 30px;
        } */

        /* 2 id 选择器，只能针对唯一的元素生效，因为一个页面中的 id 是唯一的 */
        /* #oneDiv {
            color: red;
        } */

        /* 3 后代选择器：先找页面中所有的 ul，然后在这些 ul 中找所有的 li 
            注意： li 只要是 ul 的后代即可，不一定是“子元素”，也可以是子元素，孙子元素，重孙子元素...*/
        /* ul li {
            color: red;
        } */
        /* 4 类选择器 */
        /* .one li {
            color: green;
        } */

        /* 5 子选择器 .one>a */
        /* .one>a {
            color: red;
        } */

        /* .two {
            font-size: 30px;
        }
        .three {
            font-size: 30px;
        } */

        /* 6 并集选择器 */
        /* .two, .three {
            font-size: 30px;
        } */

        /* 7 伪类选择器 */
        /* :hover 鼠标悬停时候的状态 */
        /* .one:hover {
            color: red;
            font-size: 30px;
        } */
        /* :active 鼠标按下时候的状态 */
        /* .one:active {
            color: green;
            font-size: 40px;
        } */

        /* 字体属性 */
        /* 
        .three {
            font-size: 40px;
            font-family: '黑体';
        }
        .four {
            font-size: 40px;
            font-family: '楷体';
        } */
        .one {
            font-size: 30px;
            font-family: '微软雅黑';
            font-weight: bold;
            /* color: rgb(123, 255, 50); */
            /* color: #ff0000; */
            /* 要求三个分量都是成对存在的才可以缩写。AABBCC这种形式的才可以缩写 */
            /* color: #f00;  */
            color: #00ff00;
            text-align: left;
            text-decoration: underline;
            /* 文本缩进 em 是一个相对的量，是以文字尺寸为基础进行设置的 */
            text-indent: 2em;
            /* 行高 = 文字高度+行间距 */
            line-height: 60px;

            /* 背景颜色 */
            /* background-color: rgb(0, 128, 0); */
            /* 背景图片 */
            background-image: url(image/dog.png);
            height: 1000px;
            /* 图片不平铺 */
            background-repeat: no-repeat;
            /* 背景图片位置 */
            background-position: top center;
            /* 设置背景图片尺寸大小 */
            background-size: 500px;
        }

        a {
            /* 去掉默认的下划线 */
            text-decoration: none;
        }

        .two {
            font-size: 20px;
            font-family: '宋体';
            width: 200px;
            height: 100px;
            background-color: orange;
            color: #fff;

            text-align: left;
            /* line-height: 100px; */

            /* 圆角矩形 */
            /* border-radius: 10px; */
            /* 设置边框 */
            border: 10px green solid;
            /* 此时边框不会撑大盒子了 */
            box-sizing: border-box;

            padding: 10px 20px;

            margin-bottom: 5px;
           
        }

        .three {
            width: 200px;
            height: 100px;
            background-color: gray;
        }

        .four {
            width: 50px;
            height: 50px;
            background-color: red;
            margin-left: auto;
            margin-right: auto;
        }

    </style>

    <div class="four">
        这是一个 div 
    </div>

    <div class="three">
        这是一个 div 
    </div>

    <div class="two">
        这是一个 div 
    </div>

    <!-- <a href="#">这是一个a标签</a> -->
    <!-- <div class="two">
        这是一个 div
    </div>
    <div class="three">
        这是一个 div
    </div>
    <div class="four">
        这是一个 div
    </div> -->
    

    <!-- <div class="one">
        <a href="#" class="two">链接1</a>
        <p>
            <a href="#" class="three">链接2</a>
        </p>
    </div> -->
    <!-- <ol class="one">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul> -->


    <!-- <div id="oneDiv">
        这是一个 div
    </div>

    <div id="twoDiv">
        这是另一个 div
    </div> -->

    <!--  一个元素可以引用多个类 -->
    <!-- <div class="one four">    
        这是第一个 div
    </div>
    <div class="one">
        这是第二个 div
    </div>
    <div class="three">
        这是第三个 div
    </div> -->
</body>
</html>